<a href='https://github.com/angular/angular.js/edit/v1.5.x/docs/content/error/$compile/reqslot.ngdoc?message=docs(error%2Freqslot)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>


<h1>Error: $compile:reqslot
  <div><span class='hint'>Required transclusion slot</span></div>
</h1>

<div>
    <pre class="minerr-errmsg" error-display="Required transclusion slot `{0}` was not filled.">Required transclusion slot `{0}` was not filled.</pre>
</div>

<h2>Description</h2>
<div class="description">
  <p>This error occurs when a directive or component try to transclude a slot that is not provided.</p>
<p>Transcluded elements must contain something. This error could happen when you try to transclude a self closing tag element.
Also you can make a transclusion slot optional with a <code>?</code> prefix.</p>
<pre><code class="lang-js">// In this example the &lt;my-component&gt; must have an &lt;important-component&gt; inside to transclude it.
// If not, a reqslot error will be generated.

var componentConfig = {
  template: &#39;path/to/template.html&#39;,
  tranclude: {
    importantSlot: &#39;importantComponent&#39;, // mandatory transclusion
    optionalSlot: &#39;?optionalComponent&#39;,  // optional transclusion
  }
};

angular
  .module(&#39;doc&#39;)
  .component(&#39;myComponent&#39;, componentConfig)
</code></pre>
<pre><code class="lang-html">&lt;!-- Will not work because &lt;important-component&gt; is missing --&gt;
&lt;my-component&gt;
&lt;/my-component&gt;

&lt;my-component&gt;
  &lt;optional-component&gt;&lt;/optional-component&gt;
&lt;/my-component&gt;

&lt;!-- Will work --&gt;
&lt;my-component&gt;
  &lt;important-component&gt;&lt;/important-component&gt;
&lt;/my-component&gt;

&lt;my-component&gt;
  &lt;optional-component&gt;&lt;/optional-component&gt;
  &lt;important-component&gt;&lt;/important-component&gt;
&lt;/my-component&gt;
</code></pre>

</div>


